<template>
  <div class="canvas">
    <el-card class="box-card">
      <h2>树形结构查找节点(treeFind)</h2>
      <div class="contentDescription">
        <h3>介绍</h3>
        <div class="content">
          <span style="padding-left: 10px;">树形结构查找节点</span>
        </div>
        <h3>使用</h3>
        <div class="content">
          <span style="padding-left: 10px;">直接复制粘贴函数传入数组即可</span>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <h2>实现代码</h2>
      <div class="contentDescription">
        <div class="content">
          <codeBlock :code="bphCode.fnF" :type='"js"'></codeBlock>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import codeBlock from '@/components/code.vue'
import bphCode from '@/views/jsView/js/treeFind'
export default {
  name: "VuedemoCanvas",
  components: {
    codeBlock
  },
  data() {
    return {
      bphCode: bphCode
    };
  },

  mounted() {
    let tree = [
      {
        id: "a", pid: 0, value: "陕西", children: [
          { id: 1, pid: "a", value: "西安" },
          { id: 2, pid: "a", value: "渭南" },
          { id: 3, pid: "a", value: "咸阳" },
        ]
      },
      {
        id: "b", pid: 0, value: "广东", children: [
          { id: 11, pid: "b", value: "广州" },
          { id: 12, pid: "b", value: "深圳" },
          { id: 13, pid: "b", value: "潮汕" },
        ]
      },
      {
        id: "c", pid: 0, value: "湖南", children: [
          {
            id: 21, pid: "c", value: "长沙", children: [
              { id: 11, pid: 21, value: "广州A" },
              { id: 12, pid: 21, value: "深圳A" },
              { id: 13, pid: 21, value: "潮汕A" },
            ]
          },
          { id: 22, pid: "c", value: "常德" },
          { id: 23, pid: "c", value: "岳阳" },
        ]
      },
    ]
    console.log(this.treeFind(tree, data => data.id == 13));
  },

  methods: {
    treeFind(tree, func) {
      for (const data of tree) {
        if (func(data)) return data
        if (data.children) {
          const res = this.treeFind(data.children, func)
          if (res) return res
        }
      }
      return null
    }
  },
};
</script>

<style lang="scss" scoped>
.contentBox {
  margin: 0 auto;
  width: 100%;
  height: 360px;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;

  .box {
    position: relative;
    width: 600px;
    height: 300px;
    margin: 0 20px;

    // padding: 100px;
    .imgbox {
      position: relative;
      width: 100%;
      height: 100%;
      user-select: none;
      // margin: 100px;
      // padding: 10px;
    }
  }

  .box2 {
    border: 1px solid #928c8c;
    width: 600px;
    height: 300px;
  }

  .imgbox2 {
    width: 600px;
    height: 300px;
    user-select: none;
    // margin: 100px;
    // padding: 10px;
  }
}

.canvas {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  .contentDescription {
    margin-left: 50px;
    margin-top: 10px;

    .content {
      margin-left: 20px;
    }
  }
}

.box-card {
  width: 80%;
  margin-bottom: 20px;
}
</style>
<style>
.CodeMirror-scroll {
  background-color: #f6f8fa !important;
  height: 500px;
}

.CodeMirror {
  height: 500px;
  overflow-y: hidden;
  background-color: #f6f8fa !important;
}

.code-box {
  height: 100%;
  overflow: auto;
}

.green {
  color: rgb(62, 175, 124);
  margin-right: 10px;
}

.df {
  display: flex;
  line-height: 30px;
}
</style>